<template>
  <div id="app" class="app">
    <div ref="echarts" id="echarts">21</div>
  </div>
</template>

<script>

export default {
  name: "Bar3D",
  data: function () {
    return {

    }
  },
  methods: {
    bar3D() {
      let dom = this.$refs.echarts;
      let option = {
        xAxis3D: {
          type: "category",
          name: "X:中心名称",
          // nameGap: 45,
          nameTextStyle: {
            color: "#ffffff",
          },
          axisLine: {
            lineStyle: {
              color: "#FFFFFF",
            },
          },
          axisLabel: {
            show: false,
          },
        },
        yAxis3D: {
          type: "value",
          name: "Y:调用数量",
          nameTextStyle: {
            color: "#ffffff",
          },
          axisLine: {
            lineStyle: {
              color: "#FFFFFF",
            },
          },
        },
        zAxis3D: {
          type: "value",
          name: "Z:服务数量",
          nameTextStyle: {
            color: "#ffffff",
          },
          axisLine: {
            lineStyle: {
              color: "#FFFFFF",
            },
          },
        },
        grid3D: {
          viewControl: {
            // autoRotate: true
          },
          light: {
            main: {
              shadow: true,
              quality: "ultra",
              intensity: 1.5,
            },
          },
          top: "6%",
          width: "90%",
          height: "80%",
        },
        series: [
          {
            name: "静态服务数量",
            type: "bar3D",
            data: [
              ["资源中心", 2, 1],
              ["资产中心", 8, 6],
              ["图形中心", 11, 10],
              ["拓扑中心", 2, 1],
              ["管理中心", 11, 8],
              ["计量中心", 4, 3],
            ],
            stack: "stack",
            shading: "lambert",
            emphasis: {
              label: {
                show: false,
              },
            },
            itemStyle: {
              color: "#0BB33E",
            },
          },
          {
            name: "动态服务数量",
            type: "bar3D",
            data: [
              ["资源中心", 2, 1],
              ["资产中心", 8, 3],
              [" 图形中心", 11, 4],
              ["拓扑中心", 2, 1],
              ["测点管理中心", 11, 3],
              ["计量中心", 4, 1],
            ],
            stack: "stack",
            shading: "lambert",
            emphasis: {
              label: {
                show: false,
              },
            },
            itemStyle: {
              color: "#0AC1C1",
            },
          },
          {
            name: "异常服务数量",
            type: "bar3D",
            data: [
              ["资源中心", 2, 1],
              ["资产中心", 8, 2],
              [" 图形中心", 11, 3],
              ["拓扑中心", 2, 1],
              ["测点管理中心", 11, 6],
              ["计量中心", 4, 2],
            ],
            stack: "stack",
            shading: "lambert",
            emphasis: {
              label: {
                show: false,
              },
            },
            itemStyle: {
              color: "#DF0024",
            },
          },
        ],
      };
      this.echartsMit(dom, option);
    },
    echartsMit(dom, option) {
      let myChart = this.$echarts.init(dom);
      myChart.setOption(option);
    },
  },
  mounted() {
    this.bar3D()
  }

}
</script>

<style>
#echarts {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>


